import React, { useState } from 'react';
// 首页的样式表
import '../styles/pages/index.css'
// 公共头部
import Header from '../components/Header'
// 身份认证
import Idcard from '../components/Idcard'
// 底部copy
import { Row, Col, List, Breadcrumb, Affix } from 'antd'
import axios from 'axios'

// 文章详情样式
import '../styles/pages/detail.css'
// 主页放轮播图
import Footer from '../components/Foot';

import Tocify from '../components/tocify.tsx'

import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

// 引入接口地址管理文件
import servicePath from '../config/apiUrl'
const Deatail = (props) => {
    const renderer = new marked.Renderer()
    marked.setOptions({
        renderer: renderer,    // 必填，可通过自定义Renderer渲染自定义格式
        gfm: true,   // 启动类似github样式的markdown 
        pedantic: false,  // 只解析符合markdown定义的，不修正mark down的错误
        sanitizer: false,   // true为忽略html标签 开发人员一定要写false
        tables: true,   // 支持github形式的表格，必须打开gfm选项
        breaks: true, // 支持github换行符
        smartLists: true,   // 优化列表 写true好看
        highlight: function (code) {
            return hljs.highlightAuto(code).value
        }
    })
    const tocify = new Tocify()
    renderer.heading = function (text, level, raw) {
        const anchor = tocify.add(text, level);
        return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
    };
    let html = props.article_content
    return (
        <div>
            <Affix offsetTop={0}>
                <Header className="header"></Header>
            </Affix>
            {/* // 双栏布局 */}
            <Row className="comm-main" type='flex' justify='center'>
                <Col className="comm-left" xs={24} sm={24} md={10} lg={15} xl={12}>
                    <div className="bread-div">
                        <Breadcrumb>
                            <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                            <Breadcrumb.Item><a href='/List'>文章列表</a></Breadcrumb.Item>
                            <Breadcrumb.Item>{props.title}</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {/* 文章信息 */}
                    <div className="pasg">
                        <div className="detailed-title">
                            {props.title}
                        </div>
                        {/* 时间之类的信息 */}
                        <div className="list-icon center">
                            <div className="createtime">
                                <i className="iconfont">&#xe609;</i>
                                {props.addTime}
                            </div>
                            <div className="greate">
                                <i className="iconfont">&#xe664;</i>
                                {props.view_count}
                            </div>
                        </div>
                        {/* 文章信息 */}
                        {/* 这里要做的是解析md语法 */}
                        <div className="psg-info">
                            <div className="detailed-content" dangerouslySetInnerHTML={{ __html: html }}>
                            </div>
                        </div>
                    </div>
                </Col>
                <Col className='comm-right' xs={0} sm={0} md={8} lg={5} xl={4}>
                    {/* 广告组件 */}
                    {/* <Advert></Advert> */}
                    <Idcard></Idcard>
                    <Affix offsetTop={65}>
                        <div className="detailed-nav comm-box">
                            <div className="nav-title">文章目录</div>
                            <div className="toc-list">
                                {tocify && tocify.render()}
                            </div>
                        </div>
                    </Affix>
                </Col>
            </Row>

            <Footer></Footer>
        </div >
    )
}

Deatail.getInitialProps = async (context) => {
    console.log(context.query.id)
    let id = context.query.id
    const promise = new Promise((resolve) => {
        axios(`${servicePath.getArticleById}?id=${id}`).then(
            (res) => {
                resolve(res.data.data[0])
            }
        )
    })

    return await promise
}

export default Deatail
